<template>
  <a-modal
    :visible.sync="visible"
    v-bind="$attrs"
    v-on="$listeners"
    :maskClosable="false"
    :footer="null"
    width="1298px"
    wrapClassName="project-detail-modal-container"
    @cancel="handleClose()"
    centered
  >
    <div class="project-detail-modal-body">
      <!-- 标题 -->
      <div class="header">
        <div class="title">{{ dataSoucre.proName }}</div>
        <div class="close-btn" @click="handleClose()"></div>
      </div>
      <div class="body">
        <div class="left-dom">
          <div class="bg_1"></div>
          <div class="bg_2"></div>
          <div class="bg_3"></div>
          <div class="bg_4"></div>
          <div class="bg_5"></div>
          <div class="title">
            <div class="lable">{{ (dataSoucre.total || 0).toFixed(2) }}%</div>
            <div class="value">项目总进度</div>
          </div>
        </div>
        <div class="right-schedule">
          <div class="legend-container">
            <div class="legend-item">计划进度</div>
            <div class="legend-item">实际进度</div>
            <div class="legend-item">延期完成</div>
            <div class="legend-item">提前完成</div>
          </div>
          <div
            class="prev"
            @click="prev()"
            :class="[mileageData.length <= 1 && 'tran']"
          ></div>
          <div class="carousel-container">
            <template v-if="mileageData.length > 0">
              <div class="plan-date">
                <div
                  v-for="(item, index) in mileageData[index]"
                  :key="index"
                  class="plan-item"
                >
                  <div>{{ item.planComplete }}</div>
                  <div class="plan-icon">
                    <a-icon type="check-circle" theme="filled" />
                    <div class="line" v-if="number > 1"></div>
                  </div>
                </div>
              </div>
              <div class="plan-name">
                <div
                  v-for="(item, index) in mileageData[index]"
                  :key="index"
                  class="plan-item"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="plan-reality">
                <div
                  v-for="(item, index) in mileageData[index]"
                  :key="index"
                  class="plan-item"
                >
                  <div class="plan-icon">
                    <a-icon
                      type="check-circle"
                      theme="filled"
                      :class="checkDeviationClass(item)"
                    />
                    <div class="line" v-if="number > 1"></div>
                  </div>
                  <div>{{ item.actualCompletion }}</div>
                </div>
              </div>
            </template>
            <a-empty v-else :image="simpleImage" />
          </div>
          <div
            class="next"
            @click="next()"
            :class="[mileageData.length <= 1 && 'tran']"
          ></div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { Empty } from "ant-design-vue";
import { pageProgressMilestone } from "@/api/progressManage";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSoucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      mileageData: [],
      index: 0,
      number: 0,
    };
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
    },
  },
  methods: {
    //上一页
    prev() {
      if (this.index > 0) {
        this.index--;
      } else {
        this.index = this.mileageData.length - 1;
      }
      this.number = this.mileageData[this.index].length;
    },
    //下一页
    next() {
      if (this.index < this.mileageData.length - 1) {
        this.index++;
      } else {
        this.index = 0;
      }
      this.number = this.mileageData[this.index].length;
    },

    getData() {
      pageProgressMilestone({
        page: 1,
        pageSize: 20,
        proId: this.dataSoucre.proId,
      })
        .then((res) => {
          let list = res?.data?.rows?.[0]?.scheduleMilestoneProjects ?? [];
          this.mileageData = this.filterNum(list, 8);
          this.number = this.mileageData?.[0].length ?? 0;
        })
        .catch((_) => {
          this.number = 0;
          this.mileageData = [];
        })
        .finally((_) => {});
    },
    //数组分割
    filterNum(arr = [], number) {
      let newArr = [];
      for (let i = 0; i < arr.length; ) {
        newArr.push(arr.slice(i, (i += number)));
      }
      return newArr;
    },
    checkDeviationClass(row) {
      let { statusDesc } = row;
      console.log(statusDesc, "statusDesc");
      switch (statusDesc) {
        case "提前":
          return "deviation_1";
        case "超期":
          return "deviation_2";
        case "正常":
          return "deviation_3";
        case "进行中":
          return "deviation_3";
        default:
          return "";
      }
    },
    handleClose() {
      this.mileageData = [];
      this.index = 0;
      this.number = 0;
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.project-detail-modal-container {
  .ant-modal-content {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    .ant-modal-close {
      display: none;
    }
    .ant-modal-body {
      padding: 0 !important;
      .project-detail-modal-body {
        height: 330px;
        background: rgba(1, 30, 38, 0.8);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid rgba(100, 193, 220, 0.6);
        border-radius: 0 8px 0 0;
        .header {
          height: 36px;
          flex-shrink: 0;
          background: linear-gradient(90deg, #00a7d8, rgba(0, 77, 99, 0));
          position: relative;
          &::before {
            content: "";
            display: flex;
            height: 40px;
            width: 300px;
            position: absolute;
            top: 0;
            left: 0;
            background: url("~@/assets/img/portalEntry/modal_icon_1.png");
            background-size: 100% 100%;
          }
          &::after {
            content: "";
            display: flex;
            height: 100%;
            width: 75px;
            position: absolute;
            top: -1px;
            right: -1px;
            background: url("~@/assets/img/portalEntry/modal_icon_2.png");
            background-size: 100% 100%;
          }
          .title {
            position: absolute;
            height: 100%;
            color: #fff;
            font-size: 16px;
            letter-spacing: 1px;
            line-height: 36px;
            padding-left: 12px;
            position: relative;
            &::before {
              content: "";
              position: absolute;
              height: 100%;
              width: 21px;
              background: url("~@/assets/img/portalEntry/modal_icon_3.png");
              background-size: 100% 100%;
              left: -1px;
              top: 0;
            }
          }
          .close-btn {
            position: absolute;
            width: 16px;
            height: 16px;
            background: url("~@/assets/img/portalEntry/modal_icon_4.png")
              no-repeat center center;
            background-size: 12px 12px;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 9;
          }
        }
        .body {
          flex: 1;
          display: flex;
          overflow: hidden;
          box-sizing: border-box;
          padding: 44px 20px 44px 20px;
          .left-dom {
            width: 242px;
            height: 200px;
            padding: 0 32px 0 10px;
            box-sizing: border-box;
            position: relative;
            @keyframes rotateAni {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }

            @keyframes rotateAniReverse {
              0% {
                transform: rotate(360deg);
              }
              100% {
                transform: rotate(0deg);
              }
            }

            .bg_1,
            .bg_2,
            .bg_3,
            .bg_4,
            .bg_5 {
              position: absolute;
              width: 200px;
              height: 200px;
            }
            .bg_1 {
              background: url("~@/assets/img/portalEntry/t_icon_5.png");
              background-size: 100% 100%;
              animation: rotateAni 10s linear infinite;
            }
            .bg_2 {
              background: url("~@/assets/img/portalEntry/t_icon_6.png");
              background-size: 100% 100%;
              animation: rotateAniReverse 10s linear infinite;
            }
            .bg_3 {
              background: url("~@/assets/img/portalEntry/t_icon_7.png");
              background-size: 100% 100%;
              animation: rotateAni 10s linear infinite;
            }
            .bg_4 {
              background: url("~@/assets/img/portalEntry/t_icon_8.png");
              background-size: 100% 100%;
              animation: rotateAniReverse 10s linear infinite;
            }
            .bg_5 {
              background: url("~@/assets/img/portalEntry/t_icon_9.png");
              background-size: 100% 100%;
            }
            .title {
              position: absolute;
              top: 50%;
              left: 48%;
              transform: translate(-50%, -50%);
              .lable {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #00ffff;
              }
              .value {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #b8f3ff;
              }
            }
          }
          .right-schedule {
            flex: 1;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
            .prev {
              cursor: pointer;
              width: 16px;
              height: 25px;
              background: url("~@/assets/img/portalEntry/t_icon_2.png");
              background-size: 100% 100%;
              opacity: 1;
            }
            .carousel-container {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              overflow: hidden;
              height: 100%;
              padding: 24px 10px 0 10px;
              box-sizing: border-box;
              .plan-date,
              .plan-name,
              .plan-reality {
                display: flex;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #b8f3ff;
                .plan-item {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  position: relative;
                  .plan-icon {
                    width: 100%;
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &::before {
                      content: "";
                      width: 45%;
                      height: 2px;
                      background: #ffd71e;
                      position: absolute;
                      left: 0;
                    }
                    &::after {
                      content: "";
                      width: 45%;
                      height: 2px;
                      background: #ffd71e;
                      position: absolute;
                      right: 0;
                    }
                    .anticon-check-circle {
                      color: #ffd71e;
                      font-size: 14px;
                    }
                    .line {
                      position: absolute;
                      right: 0;
                      width: 100%;
                      height: 8px;
                      background: rgba(255, 255, 255, 0.1);
                    }
                  }
                  &:first-of-type {
                    .plan-icon {
                      &::before {
                        display: none;
                      }
                      .line {
                        width: 47%;
                      }
                    }
                  }
                  &:last-of-type {
                    .plan-icon {
                      &::after {
                        display: none;
                      }
                      .line {
                        left: 0;
                        width: 47%;
                      }
                    }
                  }
                }
              }
              .plan-name {
                margin: 20px 0;
              }
              .plan-reality {
                .plan-item {
                  .plan-icon {
                    margin-top: 0;
                    margin-bottom: 10px;
                    &::before {
                      width: 45%;
                      background: #00d5ff;
                    }
                    &::after {
                      width: 45%;
                      background: #00d5ff;
                    }
                    .anticon-check-circle {
                      &.deviation_1 {
                        color: #55e273;
                      }
                      &.deviation_2 {
                        color: #ff7777;
                      }
                      &.deviation_3 {
                        color: #00d5ff;
                      }
                    }
                  }
                }
              }
              .ant-empty {
                .ant-empty-description {
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 14px;
                  color: #b8f3ff;
                }
              }
            }
            .next {
              cursor: pointer;
              width: 16px;
              height: 25px;
              background: url("~@/assets/img/portalEntry/t_icon_1.png");
              background-size: 100% 100%;
              opacity: 1;
            }
            .tran {
              opacity: 0.5;
              pointer-events: none;
            }
            .legend-container {
              position: absolute;
              top: 0;
              right: 0;
              display: flex;
              align-items: center;
              .legend-item {
                margin-right: 40px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: rgba(184, 243, 255, 0.8);
                position: relative;
                padding-left: 30px;
                &:last-of-type {
                  margin-right: 0;
                }
                &::before {
                  content: "";
                  width: 20px;
                  height: 2px;
                  background: #ffd71e;
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 0;
                }
                &::after {
                  content: "";
                  width: 10px;
                  height: 10px;
                  background: #fffae2;
                  border-radius: 50%;
                  border: 2px solid #ffd71e;
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 5px;
                }
                &:nth-child(2) {
                  &::before {
                    background: #00d5ff;
                  }
                  &::after {
                    border: 2px solid #00d5ff;
                  }
                }
                &:nth-child(3) {
                  &::before {
                    background: #ff7777;
                  }
                  &::after {
                    border: 2px solid #ff7777;
                  }
                }
                &:nth-child(4) {
                  &::before {
                    background: #55e273;
                  }
                  &::after {
                    border: 2px solid #55e273;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
